
<div id="sf_admin_bar">

<div class="sf_admin_filters">

  <fieldset>
    <h2>Filters</h2>

    <div class="form-row">
    <label for="filters_alert_date">Category:</label>
    <div class="content">
        <select name="category" id="category" class="category">
            <?php foreach (CommonValues::$gCompCategory['key'] as $key=>$category) { ?>
            <option value="<?php echo $category; ?>"> <?php echo $key ?></option>
            <?php } ?>
        </select>
    </div>
    </div>

    <div class="form-row">
    <label for="filters_alert_date">Description:</label>
    <div class="content">
        <input type="text" name="description" id="description" />
    </div>
    </div>

    <div class="form-row">
    <label for="filters_alert_date">Product Code:</label>
    <div class="content">
        <input type="text" name="productcode" id="productcode" />
    </div>
    </div>

   </fieldset>

	  <ul class="sf_admin_actions">
	    <li><input type="button" name="filter" value="Filter" class="sf_admin_action_filter"  onclick="changeList()" /></li>
	  </ul>

    <div id="indicator" style="display: none">Loading...</div>


</div>
</div>


<div id ="list_component2">
  <table id ='ListOfComponents' "cellspacing="0" class="sf_admin_list">
    <thead>
    <tr>
          <th id="sf_admin_list_th_productcode" width="25%">Product Code
                  </th>
          <th id="sf_admin_list_th_description" width="35%">Description
                  </th>
          <th id="sf_admin_list_th_description" width="20%">Brand
                  </th>
          <th id="sf_admin_list_th_description" width="15%">Unit
                  </th>
          <th id="sf_admin_list_th_description" width="5%">Add
                  </th>
    </tr>
    </thead>
  </table>
</div>

<ul class="sf_admin_actions">
    <li><input type="button" name="Add Components" value="Add Components" class="sf_admin_action_filter"  onclick="addComponents()" /></li>
</ul>

<table id ='added_components' "cellspacing="0" class="sf_admin_list">
<thead>
<tr>
      <th id="sf_admin_list_th_productcode" width="25%">Product Code
              </th>
      <th id="sf_admin_list_th_description" width="35%">Description
              </th>
      <th id="sf_admin_list_th_description" width="10%">Brand
              </th>
      <th id="sf_admin_list_th_description" width="10%">Unit
              </th>

      <th id="sf_admin_list_th_description">Qty</th>
      <th id="sf_admin_list_th_description" width="5%">Action
              </th>
</tr>
</thead>


<?php
    if ($tally_in->getComponentgroupId() && $tally_in->getComponentgroupId() != -1){
        $componentGroupId = $tally_in->getComponentgroupId();

        $c = new Criteria();
        $c->add(ComponentsPeer::COMPONENTGROUP_ID , $componentGroupId);
        $c->addAscendingOrderByColumn(ComponentsPeer::ID);

        $componentsList = ComponentsPeer::doSelect($c);
    }
?>
<?php if (isset($tally_in->rowIds) && count($tally_in->rowIds)) {
    foreach ($tally_in->rowIds as $key=>$id) {
        $component1= ComponentPeer::retrieveByPK($id);?>
        <tr class="sf_admin_row_<?php echo $key%2?>">
            <input type="hidden" name="rowIds[]" id ="rowIds"  class = "ExistComponents" value="<? echo $component1->getId()?>"/>
            <td><?echo $component1->getProductcode()?></td>
            <td><?echo $component1->getDescription()?></td>
            <td><?echo $component1->getBrand()?></td>
            <td><?echo $component1->getComponentunit()?></td>
            <td><input type="text" name="qtys[]" id ="qtys" size="10" value ="<?echo $tally_in->qtys[$key]?>"></td>
            <td><ul class="sf_admin_td_actions"><li><?php echo  image_tag(sfConfig::get('sf_admin_web_dir').'/images/delete_icon.png', array('align' => 'absmiddle', 'alt' => 'delete', 'title' =>'delete', 'onclick' => 'removeComponent('.$component1->getId().',"added_components", ".ExistComponents")', 'onmouseover'=>'this.style.cursor="pointer"'))?></li></ul></td>
        </tr>
<?} } elseif (isset($componentsList)) {
    foreach ($componentsList as $key=>$components) {
        $component1= ComponentPeer::retrieveByPK($components->getComponentId());?>
        <tr class="sf_admin_row_<?php echo $key%2?>">
            <input type="hidden" name="rowIds[]" id ="rowIds"  class = "ExistComponents" value="<? echo $component1->getId()?>"/>
            <td><?echo $component1->getProductcode()?></td>
            <td><?echo $component1->getDescription()?></td>
            <td><?echo $component1->getBrand()?></td>
            <td><?echo $component1->getComponentunit()?></td>
            <td><input type="text" name="qtys[]" id ="qtys" size="10"  value ="<? echo $components->getQty1()?>"></td>
            <td><ul class="sf_admin_td_actions"><li><?php echo  image_tag(sfConfig::get('sf_admin_web_dir').'/images/delete_icon.png', array('align' => 'absmiddle', 'alt' => 'delete', 'title' =>'delete', 'onclick' => 'removeComponent('.$component1->getId().', "added_components", ".ExistComponents")', 'onmouseover'=>'this.style.cursor="pointer"') ); ?></li></ul></td>
<?php }}?>
</table>

<script type="text/javascript">

function changeList() {

    var description=$("description").value;
    var productcode=$("productcode").value;
    var category = $("category").value;

    var link = '<?php echo url_for('tallyout/listAjax') ?>';
    new Ajax.Updater('list_component2', link + '?description='+ description + '&productcode=' + productcode + '&category=' + category , {asynchronous:true, evalScripts:false, onComplete:function(request, json){new Effect.Fade('indicator', {});new Effect.Highlight('list_component2', {});}, onLoading:function(request, json){new Effect.Appear('indicator', {});}});
}

function addComponents()
{
    var components = $$(".ChkboxComponents");
    var existComponents = $$(".ExistComponents");
    var table = $("added_components");
    var count = table.rows.length;

    for (var i =0; i< components.length ; i++ ){
        if (components[i].checked){
            var component = components[i];
            var rowId = component.attributes['rowId'].value;
            var bExist = false;
            for (var j =0; j< existComponents.length; j++)
                if (rowId== existComponents[j].value){
                    bExist = true;
                    break;
                }
            if (!bExist) {
                var oddRow=(count+1) % 2;
                var productCode='<td>' + $("productCode_"+ rowId).value + '</td>';
                var description='<td>'+ $("description_"+ rowId).value + '</td>';
                var brand='<td>' + $("brand_"+ rowId ).value + '</td>';
                var unit='<td>' + $("unit_"+ rowId ).value + '</td>';
                
                var rowIds = '<input type="hidden" name="rowIds[]" id ="rowIds"  class = "ExistComponents" value="' + rowId+ '"/>' ;
                var action = '<td><ul class="sf_admin_td_actions"><li>' + '<?php echo  image_tag(sfConfig::get('sf_admin_web_dir').'/images/delete_icon.png', array('align' => 'absmiddle', 'alt' => 'delete', 'title' =>'delete', 'onclick' => 'removeComponent(ROWID, "added_components", ".ExistComponents")', 'onmouseover'=>'this.style.cursor="pointer"') ); ?>' +  '</li></ul></td>';
                action = action.replace("ROWID", rowId);

                var qty='<td><input type="text" name="qtys[]" id="qtys" size="10" class ="QTYS" /></td>';

                var newRow = table.insertRow(count);
                newRow.className = 'sf_admin_row_'+ oddRow;
                newRow.innerHTML= rowIds +  productCode + description+ brand + unit +  qty  + action;
                ++count;
            }
        }

    }
    //remove component  row after add to exist
    var componentList = $("ListOfComponents");
    var j=0;
    for (var i =0; i< components.length ;  i++){
        if (components[i].checked){
            var component = components[i];
            var rowId = component.attributes['rowId'].value;
             componentList.deleteRow(i+1 - j);
             j++;
        }
    }
    //change classname, begin from 1 because there is a row with thead title
    for (var i =1; i< componentList.rows.length; i++)    {
        componentList.rows[i].className='sf_admin_row_' + (i+1)%2;
    }
}

function removeComponent(rowId, tableId, classId){
    var existComponents = $$(classId);
    var components = $(tableId);

    for (var i =0; i < existComponents.length; i++){
        if (rowId == existComponents[i].value){
            components.deleteRow(i+1);
            break;
        }
    }
    //because there is a row with thead title
    for (var i =1; i< components.rows.length; i++)    {
        components.rows[i].className='sf_admin_row_'+ (i+1)%2;
    }
}

</script>